<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    body {
        background-color: #F5F5F5;
        
    }
    #box{
        margin: 50px auto;
        width: 1600px; 
        height: 614px;
    }
    li {
        width:300px ;
        height: 334px;
    }
    div li {
        display: block;
        float: left;
        background-color: #fff;
        padding: 20px 0;
        margin-bottom: 20px;
        margin-left: 20px;
        text-align: center;
    }   
    h3{
        color: #333;
        font-size: 16px;
        margin: 0px 10px 2px;
        padding-top: 25px;
        
    }
    p {
        color: #b0b0b0;
        font-size: 14px;
        margin: 0px 10px 10px;
        padding-top: 5px;
        letter-spacing: 1px;
    }
    #org {
        font: 18px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
        color: #FF6700;
        
    }
    #through {
            
        text-decoration: line-through;
        
    }
    #box #zuo00 {
        width: 234px;
        height: 614px;
        margin: 0;
        padding: 0;
        margin-right: 60px;
    }
    .cover  {
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <div id="box">
        <ul>
            <li id="zuo00"><div class="zuo0"><img src="../img/小米盒子0.webp" alt=""></div></li>
            <li>
                <a href="">
                    <div><img class="cover" src="../img/小米盒子1.webp" alt=""></div>
                    <h3>Note 10 pro</h3>
                    <p>天玑1100年度旗舰芯,VC液冷散热</p>
                    <p class="money">
                        <span id="org">1599元起</span>
                            <del>
                                 <span id="through" >1699元</span>
                            </del>
                    </p>    
                </a> 
            </li>
            <li>
                <a href="">
                    <div><img  class="cover" src="../img/小米盒子2.webp" alt=""></div>
                    <h3>Redmi Note 10 5G</h3>
                    <p>5G小金刚,旗舰长续航</p>
                    <p class="money">
                        <span id="org">1099元起</span>
                            <del>
                                 <span id="through"></span>
                            </del>
                    </p>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img class="cover" src="../img/小米盒子3.webp" alt=""></div>
                    <h3>小米MIX FOLD</h3>
                    <p>折叠大屏 | 自研芯片</p>
                    <p class="money">
                        <span id="org">9999元起</span>
                            <del>
                                  <span id="through"></span>
                            </del>
                    </p>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img  class="cover" src="../img/小米盒子4.webp" alt=""></div>
                    <h3>小米11 Uitra</h3>
                    <p>1/1.12"GN2 | 2K四维曲屏</p>
                    <p class="money">
                        <span id="org">5499元起</span>
                            <del>
                                  <span id="through">5499元起</span>
                            </del>
                    </p>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img  class="cover" src="../img/小米盒子5.webp" alt=""></div>
                    <h3>小米11 Pro</h3>
                    <p>1/1.12"GN2 | 骁龙888</p>
                    <p class="money">
                        <span id="org">4499元起</span>
                            <del>
                                <span id="through"></span>
                            </del>
                    </p>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img  class="cover" src="../img/小米盒子6.webp" alt=""></div>
                    <h3>小米11 青春版</h3>
                    <p>小米11 青春版 轻薄</p>
                    <p class="money">
                        <span id="org">2099元起</span>
                            <del>
                                <span id="through">2299元</span>
                            </del>
                    </p>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img  class="cover" src="../img/小米盒子7.webp" alt=""></div>
                    <h3>K40 游戏增强版</h3>
                    <p>轻薄电竞设计</p>
                    <p class="money"> 
                        <span id="org">1999元起</span>
                            <del>
                                 <span id="through"></span>
                            </del>
                    </p>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img class="cover" src="../img/小米盒子8.webp" alt=""></div>
                    <h3>黑鲨4 Pro</h3>
                    <p>黑鲨4 Pro</p>
                    <p>
                        <span id="org">3999元起</span>
                            <del>
                                  <span id="through"></span>
                            </del>
                    </p>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>